<template>
  <a-modal title="设置库存单价" size="mini" class="modal-con" :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
    <div>
      <a-table size="mini" class="table-singe-line" :pagination="false" :data="tableList" style="margin-top: 10px">
        <template #columns>
          <a-table-column title="店铺" :width="140">
            <template #cell="{ record }">
              {{ record.shopName }}
            </template>
          </a-table-column>
          <a-table-column title="运营" :width="80">
            <template #cell="{ record }">
              {{ record.salesmanName }}
            </template>
          </a-table-column>
          <a-table-column title="FNSKU" :width="80">
            <template #cell="{ record }">
              {{ record.fnsku }}
            </template>
          </a-table-column>
          <a-table-column title="图片" :width="60">
            <template #cell="{ record }">
              <ImgPopover :src="record.productImg">
                <template #con>
                  <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                </template>
              </ImgPopover>
            </template>
          </a-table-column>
          <a-table-column title="产品SKU" :width="140">
            <template #cell="{ record }">
              {{ record.sku }}
            </template>
          </a-table-column>
          <a-table-column title="类目" :width="140">
            <template #cell="{ record }">
              {{ record.cateName }}
            </template>
          </a-table-column>
          <!-- :sortable="{ sortDirections: ['ascend', 'descend'] }" -->
          <a-table-column :width="160" fixed="right">
            <template #title>
              <div>在途仓库存单价</div>
              <div style="display: flex">
                <a-input-number hide-button v-model="titleFormValue.onWayPrice" />
                <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setPrice('onWayPrice')">
                  <template #icon>
                    <icon-double-down />
                  </template>
                </a-button>
              </div>
            </template>
            <template #cell="{ record }">
              <a-input-number hide-button v-model="record.onWayPrice" />
            </template>
          </a-table-column>
          <a-table-column :width="160" fixed="right">
            <template #title>
              <div>映射仓库存单价</div>
              <div style="display: flex">
                <a-input-number hide-button v-model="titleFormValue.mappedPrice" />
                <a-button size="small" class="gray-outline" style="margin-left: 5px" @click="setPrice('mappedPrice')">
                  <template #icon>
                    <icon-double-down />
                  </template>
                </a-button>
              </div>
            </template>
            <template #cell="{ record }">
              <a-input-number hide-button v-model="record.mappedPrice" />
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <template #footer>
      <a-button class="gray-outline" @click="handleCancel">取消</a-button>
      <a-button class="gray-outline" :loading="loading" style="margin-left: 10px" @click="handleOk">确认</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { updateFbaInventoryPrice } from '@/api/inventory'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['list'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        titleFormValue: {
          onWayPrice: '',
          mappedPrice: '',
        },
        houseList: [],
        tableList: [],
        loading: false,
      })

      const open = () => {
        data.tableList = _.cloneDeep(props.list)
      }
      const handleOk = async () => {
        let params: any = {
          updateItems: [],
        }

        data.tableList.forEach((e: any) => {
          let obj: any = {}
          obj.id = e.id
          obj.mappedPrice = e.mappedPrice
          obj.onWayPrice = e.onWayPrice
          params.updateItems.push(obj)
        })
        data.loading = true

        const res: any = await updateFbaInventoryPrice(params)
        if (res.code == 'SUCCESS') {
          data.titleFormValue = {}
          Message.success('修改成功')
          visible.value = false
          emit('save')
        }
        data.loading = false
      }
      const handleCancel = () => {
        data.loading = false
        data.titleFormValue = {}
        visible.value = false
      }
      const setPrice = (type: string) => {
        data.tableList.map((e: any) => {
          e[type] = data.titleFormValue[type]
          return e
        })
      }

      const beforeRemove = () => {
        data.form.file = null
        return true
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        setPrice,
        beforeRemove,
      }
    },
  })
</script>

<style lang="less" scoped>
  .modal-con {
    .arco-drawer {
      :deep(.arco-modal-body) {
        padding: 10px !important;
      }
    }
  }

  .upload {
    position: relative;
    :deep(.arco-upload-progress) {
      display: none;
    }
  }

  .text {
    position: absolute;
    left: 180px;
    top: 0;
  }

  .footer-text {
    font-size: 12px;
    color: darkgray;
  }
</style>
